<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>4_函数式组件使用props</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel 将js转换成jsx -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--引入props-types.js 增加类型判断-->
    <script src="../js/prop-types.js" type="text/javascript"></script>

    <!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
    <script type="text/babel">
      // 1. 创建函数式组件
      function Demo(props) {
        console.log(this); // /此处的this是undefined,因为babel编译后开启了严格模式
	      return (
			      <ul>
				      <li>姓名：{props.userName}</li>
				      <li>性别：{props.sex}</li>
				      <li>年龄：{props.age}</li>
			      </ul>
	      );
      }
      // 对标签属性进行类型、必要性的限制
      Demo.propTypes = {
	      userName:PropTypes.string.isRequired, // 限制userName必传 且为字符串
	      sex:PropTypes.string, // sex 为字符串
	      age:PropTypes.number, // 限制age为数值
      }

      // 增加默认值
      Demo.defaultProps = {
	      sex:'未知',
	      age:18
      }
      // 2. 渲染组件到页面
      ReactDOM.render(<Demo userName="阿张" age={18} sex='男' />, document.getElementById("root"));
      /*
        执行了ReactDOM.render(<MyComponent./>,,,,,之后，发生了什么？
            1,React解析组件标签，找到了MyComponent组件。
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟D0M转为真实D0M,随后呈现在页面中。
        
        */
    </script>
  </body>
</html>
